<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box{
                 width: 100px;
                  height: 100px;
                  background-color: #00FF00;
        }
    </style>
</head>
<body>

 <div class="box" id="box1" onclick="return btnClick()">box</div>
<div id="message"></div>

 <input type="text" id="username">

</body>
<script>

   var box=  document.getElementById('box1');

   box.onclick = function (){

   }

   box.ondblclick=function (){
       alert('dbclick');
   }

     function btnClick(){
          alert('你点我干啥？')
     }

     var btnMouseover=function (){
         document.getElementById('message').innerText = 'over';



     }


     box.onmouseover=btnMouseover;

     box.onmouseout=function (){
         document.getElementById('message').innerText = 'out';
     }
/**2.键盘事件*/

  var iptUsername = document.getElementById('username');
  iptUsername.onkeydown=function (){
      document.getElementById('message').innerText = this.value;
  }


/**
 *  3.系统事件
 *    load
 *    change
 *      select
 *         option 学校1
 *         option 学校2
 * */

</script>
</html>